<template>
	<div class="page" :class="path==='/cart2'?'pdb50':'pdb100'">
		<van-nav-bar :left-arrow="path==='/cart2'" safe-area-inset-top class="banner-header" fixed placeholder @click-left="back" :clickable="false">
			<template #title>
				<label :class="path==='/cart2'?'mgl16':''">采购车</label><span class="font-12">({{initSkuCateNum}})</span>
			</template>
			<template #right>
				<div class="right-btn" @click="switchSts">{{operSwitch? '完成':'管理'}}</div>
			</template>
		</van-nav-bar>
		<van-list v-if="cartInfo&&cartInfo.length>0"
				  :finished="finished" v-model:loading="loading" v-model:error="error" error-text="请求失败，点击重新加载">
			<template #finished><van-divider>没有更多了</van-divider></template>
			<van-cell-group inset class="cart-group" v-for="group in cartInfo" :key="group.shopId">
				<div class="van-cell shop-panel">
					<van-checkbox v-model="group.checked" @click="toggleShopGds(group.checked,group)"/>
					<i v-if="isHs(group.shopType)" class="iconfont unicom">&#xe6ef;</i>
					<i v-else-if="isLt(group.shopType)" class="iconfont unicom">&#xe720;</i>
					<i v-else class="iconfont other">&#xe68c;</i>
					<router-link :to="'/shop/home?shopId='+group.shopId" class="shop-title">
						<b>{{group.shopName}}</b><van-icon name="arrow" class="txt-gray" />
					</router-link>
					<GoodsCouponSheet :shop-id="group.shopId" :simple="true" v-if="group.coupons&&group.coupons.length>0"/>
				</div>
				<FavorGoodsGroup v-for="gds in group.gdsList" :key="gds.gdsId" :gds="gds" :shop-id="group.shopId" :oper-switch="operSwitch" @checkSku="getAllCheckSku" @toggleAll="getAllCheckSku"/>
				<div class="van-cell shop-act" v-if="group.shopActInfo&&group.shopActInfo.length>0">
					<template v-for="act in group.shopActInfo" :key="act.actType">
						<template v-if="act.actType==='1'">
							<van-tag plain type="primary">包邮</van-tag> <span class="mgr5">{{act.actNum}}件起免运费</span>
						</template>
						<template v-else-if="act.actType==='2'">
							<van-tag plain type="primary">满减</van-tag> <span class="mgr5">每满{{fen2Yuan2(act.actNum)}}减{{fen2Yuan2(act.discountPrice)}}</span>
						</template>
					</template>
					<router-link class="txt-primary" style="margin-left:auto" :to="'/shop/home?shopId='+group.shopId">去凑单<van-icon name="arrow" /></router-link>
				</div>
			</van-cell-group>
		</van-list>
		<van-back-top class="base-back-top" :class="path==='/cart2'?'bottom2':'bottom3'"/>
		<div class="footer-bar-wrap" :class="path==='/cart2'?'':'app-tab'">
			<div class="submit-bar">
				<van-checkbox v-model="checkAll" @click="toggleChkAll(checkAll)">全选</van-checkbox>
				<div v-show="!operSwitch" class="flex">
					<div class="font-12 txt-gray mgr10">
						<span class="txt-primary">总计：￥</span><b class="font-18 txt-primary">{{fen2Yuan2(totalAmountPrice)}}</b><br/>
						<span class="txt-primary">{{totalSkuCateChecked}}</span>种<span class="txt-primary">{{chkSkuTotalNum}}</span>件
						<span class="mgl5 mgr5">|</span> 不含运费
					</div>
					<van-button type="primary" class="btn-submit" round :disabled="chkSkuTotalNum<=0" @click="submitOrder">去结算</van-button>
				</div>
				<div v-show="operSwitch">
					<van-button round class="mgr10">移入收藏</van-button>
					<van-button type="danger" class="btn-submit" round :disabled="chkSkuTotalNum<=0">删除 {{totalSkuCateChecked}}</van-button>
				</div>
			</div>
		</div>
	</div>
</template>
<style lang="scss" scoped>
.page{
	&.pdb50{padding-bottom:50px;}
	&.pdb100{padding-bottom:100px;}
	.banner-header{
		--van-nav-bar-background:var(--body-bg-color);
		--van-nav-bar-height:40px;
		:deep(.van-nav-bar__left){padding:0 0 0 12px;}
		:deep(.van-nav-bar__title){
			margin:0 auto 0 12px;
			span{font-weight: normal;}
		}
		.right-btn{
			height:40px;padding:0 8px; display:flex; align-items: center;
			&:last-child{padding-right:0; color: var(--font-first-color);}
		}
		.mgl16{margin-left:16px;}
	}

	.cart-group{
		margin-top:10px; margin-bottom:10px;
		&:first-child{margin-top:0}
		&>.van-cell{
			padding:10px 12px; position:relative; display:flex; align-items: center;
		}
		.shop-panel{
			border-bottom:1px solid var(--border-color);display: flex; align-items: center;
			&>.iconfont{
				margin:0 4px 0 8px;
				&.unicom{color:var(--van-unicom-color)}
				&.other{color:var(--van-success-color)}
			}
		}
		.shop-title{
			font-size:15px; color:var(--font-first-color);
		}
		.coupons{margin-left:auto;}
		.shop-act{font-size:13px; color:var(--font-third-color);}
	}

	.footer-bar-wrap{
		width:100%; background:var(--white-color); position:fixed;left:0;bottom:0;
		margin-bottom:env(safe-area-inset-bottom);
		z-index:3; box-shadow: 4px 0 6px 0 rgba(0,0,0,.05);
		&.app-tab{
			bottom:50px;
		}
	}
	.submit-bar{
		height:50px;width:100%; display:flex; align-items: center; justify-content: space-between; padding:0 16px; font-size:14px;
		.van-button{height:36px;}
	}
	.submit-bar{
		.btn-submit{width:88px;}
		&>.flex>div:first-child{text-align:right;}
	}
}
</style>
<script lang="ts" setup>
import { showToast } from 'vant';
import {CartGroup,} from "@/types";
import {fen2Yuan2} from "@/utils/validate";
import GoodsCouponSheet from "@/components/goods/GoodsCouponSheet.vue";
const router = useRouter()
//data
const operSwitch = ref(false)
const checkAll=ref(false)
const finished=ref(true)
const loading=ref(false)
const error=ref(false)
const switchSts=()=>{
	operSwitch.value=!operSwitch.value
}

const totalAmountPrice=ref(0) //总价合计(不含运费)
const chkSkuTotalNum=ref(0) //所有checked的单品的总数量
const initSkuCateNum=ref(0) //采购车刚载入时，统计所有货品种类数量
const cartInfo =ref(<Array<CartGroup>>[]) //后台返回的完整购物车列表信息结构
cartInfo.value=[
	{
		shopId:'ZBCU1234',
		shopName:'大沃尔科技全国专卖旗舰店',
		shopType:'华盛全国店',
		shopActInfo:[
			{actType:'1',actNum:5},
			{actType:'2',actNum:30000,discountPrice:1000,}
		],
		coupons:[
			{
				coupIssueId:'1111',
				couponAmount:100,
				activeType:1,activeDay:100,activeTime:'',inactiveTime:'',
				controlMsg:'全场通用',limitMsg:'满1000可用',couponTypeName:'国庆大酬宾100元券',
				remainAmount:500,acquiredAmount:0,maxAcquireAmount:3,
			},
			{
				coupIssueId:'2222',
				couponAmount:500,
				activeType:2, activeDay:0,activeTime:'2023.01.23',inactiveTime:'2023.12.23',
				controlMsg:'全场通用',limitMsg:'满5000可用',couponTypeName:'国庆大酬宾500元券',
				remainAmount:0,acquiredAmount:1,maxAcquireAmount:3,
			},
			{
				coupIssueId:'3333',
				couponAmount:5000,
				activeType:1,activeDay:100,activeTime:'',inactiveTime:'',
				controlMsg:'限华为品牌',limitMsg:'满50000可用',couponTypeName:'国庆大酬宾5000元券',
				remainAmount:500,acquiredAmount:1,maxAcquireAmount:3,
			},
		],
		gdsList:[
			{
				gdsId:'111',
				gdsName:'小象智能家庭医生 小象智能家庭医生小象智能家庭医生',
				gdsImg:'https://www.woego.cn/woego/image/6449d39e2b608d0a734b9585_140x140!.jpg',
				priceLadders:[],
				activityList:[
					{
						activityId:'55',
						activityTheme:'手机节赠品',
						typeCategory:'03', //活动分类：01单品优惠 02订单优惠 03外围优惠
						typeCode:'03',
						typeName:'造星计划',
						activityContent:'手机节赠品手机节赠品手机节赠品手机节赠品手机节赠品手机节赠品手机节赠品手机节赠品手机节赠品',
						endDate:'2023-12-31',
					},
					{
						activityId:'66',
						activityTheme:'618限时抢购大狂欢',
						typeCategory:'03', //活动分类：01单品优惠 02订单优惠 03外围优惠
						typeCode:'06',
						typeName:'买赠',
						activityContent:'国庆满2000减20国庆满2000减20国庆满2000减20国庆满2000减20国庆满2000减20',
						endDate:'2023-12-31',
					},
				],
				skuList:[
					{
						skuId:'111-1',
						propNames:['星空蓝','5G','8+128G'],
						skuImg:'https://cbu01.alicdn.com/img/ibank/O1CN01UPP9V91GurHVbEI0t_!!989100683-0-cib.jpg',
						skuPrice:200000,
						discountType:'2',
						discountPrice:10000,
						minAmount:1,
						maxAmount:500,
					},
					{
						skuId:'111-2',
						propNames:['原谅绿','5G','12+256G'],
						skuImg:'https://cbu01.alicdn.com/img/ibank/O1CN01SabTvk28EFglRqIZ4_!!2214324377900-0-cib.jpg',
						skuPrice:200000,
						discountType:'1',
						discountPrice:10000,
						minAmount:1,
						maxAmount:500,
					},
					{
						skuId:'111-3',
						propNames:['闷骚红','5G','12+256G'],
						skuImg:'https://cbu01.alicdn.com/img/ibank/O1CN01sJjSmU1peq4euRtOf_!!2211843005386-0-cib.jpg',
						skuPrice:200000,
						discountType:'2',
						discountPrice:10000,
						minAmount:1,
						maxAmount:500,
					},
				],
			},
			{
				gdsId:'222',
				gdsName:'Apple iPhone 13 Pro Max Apple iPhone 13 Pro Max',
				gdsImg:'https://www.woego.cn/woego/image/622aaf5a75e50b69f7a2b40d_140x140!.jpg',
				priceLadders:[
					{ buyMinAmount: 1, buyMaxAmount: 99, afterAmountPrice: 230000, },
					{ buyMinAmount: 100, buyMaxAmount: 299, afterAmountPrice: 220000, },
					{ buyMinAmount: 300, buyMaxAmount: 1999, afterAmountPrice: 210000, },
					{ buyMinAmount: 2000, buyMaxAmount: 0, afterAmountPrice: 200000, },
				],
				activityList:[],
				skuList:[
					{
						skuId:'222-1',
						propNames:['星空蓝','5G','8+128G'],
						//skuImg:'https://cbu01.alicdn.com/img/ibank/O1CN01UPP9V91GurHVbEI0t_!!989100683-0-cib.jpg',
						skuPrice:200000,
						discountType:'0',
						discountPrice:0,
						minAmount:1,
						maxAmount:320,
					},
					{
						skuId:'222-2',
						propNames:['原谅绿','5G','12+256G'],
						//skuImg:'https://cbu01.alicdn.com/img/ibank/O1CN01SabTvk28EFglRqIZ4_!!2214324377900-0-cib.jpg',
						skuPrice:220000,
						discountType:'0',
						discountPrice:0,
						minAmount:1,
						maxAmount:420,
					},
					{
						skuId:'222-3',
						propNames:['闷骚红','5G','12+256G'],
						//skuImg:'https://cbu01.alicdn.com/img/ibank/O1CN01sJjSmU1peq4euRtOf_!!2211843005386-0-cib.jpg',
						skuPrice:220000,
						discountType:'0',
						discountPrice:0,
						minAmount:1,
						maxAmount:120,
					},
				],
			},
		]
	},
	{
		shopId:'ABRL4321',
		shopName:'安布雷拉旗舰店',
		shopType:'厂家自营店',
		coupons:[],
		gdsList:[
			{
				gdsId:'111',
				gdsName:'小象智能家庭医生 小象智能家庭医生小象智能家庭医生小象智能家庭医生',
				gdsImg:'https://www.woego.cn/woego/image/6449d39e2b608d0a734b9585_140x140!.jpg',
				priceLadders:[],
				activityList:[
					{
						activityId:'22',
						activityTheme:'国庆满2999减200',
						typeCategory:'01', //活动分类：01单品优惠 02订单优惠 03外围优惠
						typeCode:'01',
						typeName:'直降',
						activityContent:'国庆满299减20国庆满299减20国庆满299减20国庆满299减20国庆满299减20',
						endDate:'2023-12-31',
						activityPrice:3000,
						SurplusStock:100,
						activityMinAmount:2,
						canBuy:true,
					},
					{
						activityId:'11',
						activityTheme:'中秋满299减20',
						typeCategory:'02', //活动分类：01单品优惠 02订单优惠 03外围优惠
						typeCode:'02',
						typeName:'满减优惠',
						activityContent:'国庆满299减20国庆满299减20国庆满299减20国庆满299减20国庆满299减20',
						endDate:'2023-12-31',
						canBuy:true,
					},
					{
						activityId:'44',
						activityTheme:'手机新品大酬宾',
						typeCategory:'01', //活动分类：01单品优惠 02订单优惠 03外围优惠
						typeCode:'04',
						typeName:'限时抢购',
						activityContent:'国庆满299减20国庆满299减20国庆满299减20国庆满299减20国庆满299减20',
						endDate:'2023-12-31',
						activityPrice:3000,
						SurplusStock:100,
						activityMinAmount:2,
						canBuy:true,
					},
				],
				skuList:[
					{
						skuId:'111-1',
						propNames:['星空蓝','5G','8+128G'],
						//skuImg:'https://cbu01.alicdn.com/img/ibank/O1CN01UPP9V91GurHVbEI0t_!!989100683-0-cib.jpg',
						skuPrice:200000,
						discountType:'2',
						discountPrice:10000,
						minAmount:1,
						maxAmount:500,
					},
					{
						skuId:'111-2',
						propNames:['原谅绿','5G','12+256G'],
						//skuImg:'https://cbu01.alicdn.com/img/ibank/O1CN01SabTvk28EFglRqIZ4_!!2214324377900-0-cib.jpg',
						skuPrice:200000,
						discountType:'1',
						discountPrice:10000,
						minAmount:1,
						maxAmount:500,
					},
					{
						skuId:'111-3',
						propNames:['闷骚红','5G','12+256G'],
						//skuImg:'https://cbu01.alicdn.com/img/ibank/O1CN01sJjSmU1peq4euRtOf_!!2211843005386-0-cib.jpg',
						skuPrice:200000,
						discountType:'1',
						discountPrice:10000,
						minAmount:1,
						maxAmount:500,
					},
				],
			},
			{
				gdsId:'222',
				gdsName:'Apple iPhone 13 Pro Max Apple iPhone 13 Pro Max iPhone 13 Pro Max',
				gdsImg:'https://www.woego.cn/woego/image/622aaf5a75e50b69f7a2b40d_140x140!.jpg',
				priceLadders:[
					{ buyMinAmount: 1, buyMaxAmount: 99, afterAmountPrice: 230000, },
					{ buyMinAmount: 100, buyMaxAmount: 299, afterAmountPrice: 220000, },
					{ buyMinAmount: 300, buyMaxAmount: 1999, afterAmountPrice: 210000, },
					{ buyMinAmount: 2000, buyMaxAmount: 0, afterAmountPrice: 200000, },
				],
				activityList:[],
				skuList:[
					{
						skuId:'222-1',
						propNames:['星空蓝','5G','8+128G'],
						skuImg:'https://cbu01.alicdn.com/img/ibank/O1CN01UPP9V91GurHVbEI0t_!!989100683-0-cib.jpg',
						skuPrice:200000,
						discountType:'0',
						discountPrice:0,
						minAmount:1,
						maxAmount:320,
					},
					{
						skuId:'222-2',
						propNames:['原谅绿','5G','12+256G'],
						skuImg:'https://cbu01.alicdn.com/img/ibank/O1CN01SabTvk28EFglRqIZ4_!!2214324377900-0-cib.jpg',
						skuPrice:220000,
						discountType:'0',
						discountPrice:0,
						minAmount:1,
						maxAmount:420,
					},
					{
						skuId:'222-3',
						propNames:['闷骚红','5G','12+256G'],
						skuImg:'https://cbu01.alicdn.com/img/ibank/O1CN01sJjSmU1peq4euRtOf_!!2211843005386-0-cib.jpg',
						skuPrice:220000,
						discountType:'0',
						discountPrice:0,
						minAmount:1,
						maxAmount:120,
					},
				],
			},
		]
	},
]

const skus=ref(<Array<any>>[])  //结算时，要提交给后端的最简信息

//methods
const back=()=>{router.back()}
const isHs = (text:string)=>{
	return text.indexOf('华盛')>=0
}
const isLt = (text:string)=>{
	return text.indexOf('联通自营')>=0
}
const getAllCheckSku=()=>{
	//skus.value.splice(0,skus.value.length)
	let allChecked=true
	for(let shop of cartInfo.value){
		let chkGdsLen=0
		for(let gds of shop.gdsList){
			for(let sku of gds.skuList){
				if(sku.checked){
					//skus.value.push({shopId:shop.shopId,gdsId:gds.gdsId,skuId:sku.skuId,selectNum:sku.selectNum})
				}else{
					allChecked=false
				}
			}
			if(gds.checked)	++chkGdsLen
		}
		shop.checked=(chkGdsLen==shop.gdsList.length)
	}
	checkAll.value=allChecked
	//console.log(skus.value)
}

const toggleChkAll=(val:boolean)=>{
	for(let shop of cartInfo.value){
		shop.checked=val
		for(let gds of shop.gdsList){
			gds.checked=val
			for(let sku of gds.skuList){
				sku.checked=val
			}
		}
	}
}
const toggleShopGds=(val:boolean|undefined, group:CartGroup)=>{
	for(let gds of group.gdsList){
		gds.checked=val
		for(let sku of gds.skuList){
			sku.checked=val
		}
	}
	if(!val)	checkAll.value=false
	else{
		let allChecked=true
		for(let shop of cartInfo.value){
			if(!shop.checked){
				allChecked=false
				break;
			}
		}
		checkAll.value=allChecked
	}
}

//computed
const totalSkuCateChecked=computed(()=>{ //已check货品总类
	let cateTotal=0,chkSkuTotal=0,amountPrice=0
	for(let shop of cartInfo.value){
		for(let gds of shop.gdsList){
			for(let sku of gds.skuList){
				if(sku.checked){
					++cateTotal
					chkSkuTotal += sku.selectNum||0
					if(sku.selectAllPrice&&sku.selectAllPrice>0){
						amountPrice+=sku.selectAllPrice
					}
				}
			}
		}
	}
	chkSkuTotalNum.value=chkSkuTotal
	totalAmountPrice.value=amountPrice
	return cateTotal
})

//提交订单
const submitOrder=()=>{
	for(let shop of cartInfo.value){
		for(let gds of shop.gdsList){
			for(let sku of gds.skuList){
				if(sku.checked){
					skus.value.push({shopId:shop.shopId,gdsId:gds.gdsId,skuId:sku.skuId,selectNum:sku.selectNum})
				}
			}
		}
	}
	console.log(skus.value)
}

onActivated(()=>{
	for(let shop of cartInfo.value) {
		for (let gds of shop.gdsList) {
			initSkuCateNum.value+=gds.skuList.length
		}
	}
	//在onActivated中，进行刷新购物车列表的实现
})
onMounted(()=>{
	//console.log('购物车没有keepAlive!')
	for(let shop of cartInfo.value) {
		for (let gds of shop.gdsList) {
			initSkuCateNum.value+=gds.skuList.length
		}
	}
})

//computed
const path = computed(()=>{
	return router.currentRoute.value.fullPath
})
</script>